<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生成器模式</title>
    <script>
        function FormBuilder() {}
        FormBuilder.prototype = {
            fields: [],
            addFields: function (type, displayText) {
                var field;
                switch (type) {
                    case "text":
                        field = new TextField(displayText);
                        break;
                    case "email":
                        field = new EmailField(displayText);
                        break;
                    case 'button':
                        field = new ButtonField(displayText);
                        break;
                    default:
                        throw new Error('Invalid field type specified:' + type)
                }
                this.fields.push(field);
            },
            getForm: function () {
                var form = document.createElement('from'),
                    index = 0,
                    numFields = this.fields.length,
                    field;
                for (; index < numFields; index++) {
                    field = this.fields[index];
                    form.appendChild(field.getElement())
                }
                return form;
            }
        }

        function TextField(displayText) {
            this.displayText = displayText || "";
        }
        TextField.prototype.getElement = function () {
            let textField = document.createElement("input")
            textField.setAttribute("type", 'text')
            textField.setAttribute("placeholder", this.displayText)
            return textField;
        }

        function EmailField(displayText) {
            this.displayText = displayText || "";
        }
        EmailField.prototype.getElement = function () {
            let emailField = document.createElement("input")
            emailField.setAttribute("type", 'email')
            emailField.setAttribute("placeholder", this.displayText)
            return emailField;
        }

        function ButtonField(displayText) {
            this.displayText = displayText
        }
        ButtonField.prototype.getElement = function () {
            let button = document.createElement("input")
            button.setAttribute("type", 'submit')
            button.innerHTML = this.displayText;
            return button;
        }
        var formBulider = new FormBuilder(),
            from;
        formBulider.addFields('text', 'Enter the first line of your address');
        formBulider.addFields('email', 'enter your email address')
        formBulider.addFields('button', 'Sumbit')

        form = formBulider.getForm();
        window.addEventListener('load', function () {
            document.body.appendChild(form)
        }, false)
    </script>
</head>

<body>

</body>

</html>